<template>

    <Form :model="formItem" :label-width="84">
        <FormItem label="字段名称">
            <Input style="width:80%"></Input>
        </FormItem>
        <FormItem label="提示文字">
            <Input style="width:80%"></Input>
        </FormItem>
        <FormItem label="图标">
            <Upload action="//jsonplaceholder.typicode.com/posts/">
                <Button type="ghost" icon="ios-cloud-upload-outline">选择上传文件</Button>
            </Upload>
        </FormItem>
        <FormItem label="字段类型">
            <RadioGroup v-model="disabledGroup">
                <Radio label="必填"></Radio>
                <Radio label="选填"></Radio>
                <Radio label="文本"></Radio>
                <Radio label="电话"></Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="验证规则">
            <RadioGroup v-model="disabledGroup">
                <Radio label="必填"></Radio>
                <Radio label="选填"></Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="状态">
            <i-switch v-model="formItem.switch" size="large">
                <span slot="open">开启</span>
                <span slot="close">关闭</span>
            </i-switch>
        </FormItem>
        <FormItem label="排序">
            <Input style="width:80%"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary">提交</Button>
        </FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formItem: {
                    input: '',
                    select: '',
                    radio: 'male',
                    checkbox: [],
                    switch: true,
                    date: '',
                    time: '',
                    slider: [20, 50],
                    textarea: ''
                },
                disabledGroup: ''
            }
        }
    }
</script>
